<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-warn"></i> 权限设置 / 管理员列表
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.role" placeholder="" filterable class="handle-select mr10" size="small">
					<el-option key="a" label="全部" value=""></el-option>
					<el-option v-for="(item, index) in roleList" :key="index" :label="item.title" :value="item.id"></el-option>
				</el-select>
				<el-input v-model="query.search" placeholder="账号或昵称" class="handle-input mr10" size="small"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch" size="small">搜索</el-button>
				<el-button type="primary" icon="el-icon-lx-add" @click="handleAdd" size="small">添加</el-button>
				<el-button icon="el-icon-lx-refresh" @click="refreshPage" :loading="refreshLoading" size="small">清空条件</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column label="头像" align="center" width="70">
					<template #default="scope">
						<div class="cover" :style="'background-image: url(\''+(scope.row.avatar ? scope.row.avatar.slice(0,4) === 'http' ? scope.row.avatar : config.imgPath + scope.row.avatar : config.imgPath + 'static/eleme/default_avatar.jpg')+'\')'"></div>
					</template>
				</el-table-column>
				<el-table-column prop="username" label="账号" align="center" width="180"></el-table-column>
				<el-table-column prop="realname" label="昵称" align="center" width="180"></el-table-column>
				<el-table-column prop="title" label="角色" align="center" width="150"></el-table-column>
				<el-table-column label="状态" align="center" width="120">
					<template #default="scope">
						<el-tag :type="scope.row.status === 1 ? 'success' : scope.row.status === 2 ? 'danger' : ''
                            ">{{ scope.row.status === 1 ? '正常' : '已拉黑' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="180" align="center">
					<template #default="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" v-if="scope.row.status === 1" icon="el-icon-delete" @click="block(scope.$index, scope.row)">拉黑</el-button>
						<el-button type="text" v-if="scope.row.status === 2" icon="el-icon-lx-forwardfill" @click="unBlock(scope.$index, scope.row)">恢复</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination hide-on-single-page background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<el-dialog  title="添加管理员" v-model="addVisible" custom-class="dialog-page">
			<el-form :model="formData" :rules="rules" label-width="100px" ref="formAdd">
				<el-form-item prop="realname" label="姓名">
					<el-input v-model="formData.realname" maxlength="30" show-word-limit class="short-input" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item prop="username" label="登录账号">
					<el-input v-model.trim="formData.username" maxlength="30" show-word-limit class="short-input" placeholder="请设置账号"></el-input>
				</el-form-item>
				<el-form-item prop="password" label="登录密码">
					<el-input type="password" v-model.trim="formData.password" maxlength="30" class="short-input"></el-input>
				</el-form-item>
				<el-form-item prop="role" label="用户角色">
					<el-select v-model="formData.role" placeholder="选择用户角色" class="handle-select mr10">
						<el-option v-for="(item, index) in roleList" :key="index" :label="item.title" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="email" label="邮箱">
					<el-input type="email" v-model.trim="formData.email" maxlength="50" show-word-limit class="short-input" placeholder="请输入邮箱(选填)"></el-input>
				</el-form-item>
				<el-form-item prop="tel" label="手机号">
					<el-input v-model.trim="formData.tel" maxlength="11" class="short-input" placeholder="请输入手机号(选填)"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="formData.status">
						<el-radio label="1">正常</el-radio>
						<el-radio label="2">已拉黑</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="简介" prop="desc">
					<el-input type="textarea" :autosize="{ minRows: 3}" v-model="formData.desc" maxlength="255" show-word-limit placeholder="个人简介(选填)"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
                <span class="dialog-footer">
                    <el-button @click="addVisible=false">取 消</el-button>
                    <el-button type="primary" @click="addSubmit">添 加</el-button>
                </span>
			</template>
		</el-dialog>
		<el-dialog  title="编辑管理员" v-model="editVisible" custom-class="dialog-page">
			<el-form :model="formData" :rules="rules" label-width="100px" ref="formEdit">
				<el-form-item prop="realname" label="姓名">
					<el-input v-model="formData.realname" maxlength="30" show-word-limit class="short-input"></el-input>
				</el-form-item>
				<el-form-item prop="username" label="登录账号">
					<el-input v-model.trim="formData.username" maxlength="30" show-word-limit class="short-input"></el-input>
				</el-form-item>
				<el-form-item prop="password" label="登录密码">
					<el-input type="password" v-model.trim="formData.password" maxlength="30" class="short-input"></el-input>
				</el-form-item>
				<el-form-item prop="role" label="用户角色">
					<el-select v-model="formData.role" placeholder="选择用户角色" class="handle-select mr10">
						<el-option v-for="(item, index) in roleList" :key="index" :label="item.title" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="email" label="邮箱">
					<el-input type="email" v-model.trim="formData.email" maxlength="50" show-word-limit class="short-input"></el-input>
				</el-form-item>
				<el-form-item prop="tel" label="手机号">
					<el-input v-model.trim="formData.tel" maxlength="11" class="short-input"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="formData.status">
						<el-radio label="1">正常</el-radio>
						<el-radio label="2">已拉黑</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="简介" prop="desc">
					<el-input type="textarea" :autosize="{ minRows: 3}" v-model="formData.desc" maxlength="255" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible=false">取 消</el-button>
                    <el-button type="primary" @click="saveSubmit">保 存</el-button>
                </span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import { ref, reactive, toRaw, defineComponent } from "vue";
export default defineComponent({name:'adminlist'})
</script>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import {
	getAdminList,
	getAdminDetail,
	adminMod,
	adminAdd,
	adminBlock,
	getRoleList
} from "../../api/api";
import { ElLoading } from 'element-plus';
import Methods from "../../utils/Methods";
const query = reactive({
	role: '',
	search: "",
	pageIndex: 1,
	pageSize: 10,
})
const roleList = ref([])
const tableData = ref([])
const pageTotal = ref(0)
const addVisible = ref(false);
const editVisible = ref(false);
const formAdd = ref(null)
const formEdit = ref(null)
const formData = reactive({
	role: "",
	username: "",
	realname: "",
	password: "",
	email: "",
	tel: "",
	desc: "",
	status: "1"
})
let loading = null
let editId = ''
const loadingStart = () => {
	loading = ElLoading.service({
		lock: true,
		text: 'Loading',
		spinner: 'el-icon-loading',
		background: 'rgba(0, 0, 0, 0.3)',
	})
}
const getData = () => {
	query.token = Methods.getLocalStorage('admin_token')
	getAdminList(query).then(res => {
		tableData.value = res.list
		pageTotal.value = res.count
	}).catch(err => {
		console.log(err,'----errr')
	})
}
const getRoleData = () => {
	getRoleList({token: Methods.getLocalStorage('admin_token'),pageIndex:1,pageSize:100}).then(res => {
		roleList.value = res.list
	}).catch(err => {
		console.log(err,'----errr')
	})
}
getData()
getRoleData()

const refreshLoading = ref(false)
const refreshPage = () => {
  query.role = ''
  query.search = ''
  query.pageIndex = 1
  getData()
  getRoleData()
}
// 查询操作, 分页导航
const handleSearch = () => {
	query.pageIndex = 1;getData();
};
const handlePageChange = (val) => {
	query.pageIndex = val;getData();
};
//拉黑操作
const block = (index) => {
	ElMessageBox.confirm("确定要拉黑吗？", "提示", {
		type: "warning",
	}).then(() => {
		let data = {
			id: tableData.value[index].id,
			token: Methods.getLocalStorage('admin_token')
		}
		return adminBlock(data)
	}).then(res => {
		ElMessage.success("已拉黑")
		tableData.value[index].status = 2
	}).catch(err => {
		console.log(err,'----unblock err')
	})
}
//恢复操作
const unBlock = (index) => {
	ElMessageBox.confirm("确定要恢复吗？", "提示", {
		type: "warning",
	}).then(() => {
		let data = {
			id: tableData.value[index].id,
			token: Methods.getLocalStorage('admin_token')
		}
		return adminBlock(data)
	}).then(res => {
		ElMessage.success("已恢复")
		tableData.value[index].status = 1
	}).catch(err => {
		console.log(err,'----unblock err')
	})
}
const handleAdd = () => {
	formData.role = 1
	formData.username = ""
	formData.realname =  ""
	formData.password = ""
	formData.email = ""
	formData.tel =""
	formData.desc = ""
	formData.status = "1"
	addVisible.value = true
}
const handleEdit = (index,row) => {
	editVisible.value = true
	editId = row.id
	let query = { id: editId, token: Methods.getLocalStorage('admin_token') }
	getAdminDetail(query).then(res => {
		formData.role = res.role
		formData.username = res.username
		formData.realname = res.realname
		formData.email = res.email
		formData.tel = res.tel
		formData.desc = res.desc
		formData.status = res.status.toString()
	}).catch(err => {console.log(err)})
}
const rules = {
	realname: [{required: true, message: "请输入姓名", trigger: "blur",},],
	username: [{ required: true, message: "请输入账号", trigger:"blur" },],
	email: [{type:'email', message: "请输入正确的邮箱", trigger: ["blur","change"],},],
};
const addSubmit = () => {
	formAdd.value.validate((valid) => {
		if (valid) {
			let data = toRaw(formData)
			data.token = Methods.getLocalStorage('admin_token')
			loadingStart()
			adminAdd(data).then(res => {
				ElMessage.success("添加成功")
				addVisible.value = false
				loading.close()
				getData()
			}).catch(err => {
				console.log(err,'---adminadd')
				loading.close()
			})
		} else {
			return false
		}
	})
}
const saveSubmit = () => {
	formEdit.value.validate((valid) => {
		if (valid) {
			let data = toRaw(formData)
			data.id = editId
			data.token = Methods.getLocalStorage('admin_token')
			loadingStart()
			adminMod(data).then(res => {
				ElMessage.success("保存成功")
				editVisible.value = false
				loading.close()
				getData()
			}).catch(err => {
				console.log(err,'---adminmod')
				loading.close()
			})
		} else {
			return false
		}
	})
}
</script>
<style scoped lang="scss">
.handle-box {
	margin-bottom: 5px;
	//display: flex;
	//flex-wrap: wrap;
}
.handle-select {
	width: 150px;
	margin-bottom: 15px;
}
.handle-input {
	width: 300px;
	margin-bottom: 15px;
}
.table {
	width: 100%;
	font-size: 14px;
	.cover {
		width: 50px;
		height: 50px;
		border-radius: 3px;
		background-position: center center;
		background-size: cover;
	}
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
::v-deep(.dialog-page) {
	max-width: 1200px;
	min-width: 800px;
}
.short-input {
	width: 400px;
}

</style>
